<template>
  <div class="page"
    ref="page">
    <h2>养老调查问卷</h2>
    <p>
      告诉我们，我们非常重视每位用户的宝贵意见，期待您的参与！现在我们就马上开始吧！
    </p>
    <el-form :model="ruleForm"
      ref="ruleForm"
      label-position="top"
      :rules="rules"
      label-width="12.5rem"
      class="demo-ruleForm">
      <el-form-item
        label="1.性别"
        prop="questionnaireSex">
        <el-radio-group
          v-model="ruleForm.questionnaireSex">
          <el-radio
            label="0">男</el-radio>
          <el-radio
            label="1">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="2.年龄"
        prop="questionnaireAge">
        <el-radio-group
          v-model="ruleForm.questionnaireAge">
          <el-radio
            label="0">40-45</el-radio>
          <el-radio
            label="1">45-50</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="3.是否为独生子女"
        prop="questionnaireChild">
        <el-radio-group
          v-model="ruleForm.questionnaireChild">
          <el-radio
            label="0">是</el-radio>
          <el-radio
            label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="4.是否患有"
        prop="questionnaireIllness">
        <el-checkbox-group
          v-model="ruleForm.questionnaireIllness">
          <el-checkbox
            label="0"
            name="type">高血压</el-checkbox>
          <el-checkbox
            label="1"
            name="type">高血脂</el-checkbox>
          <el-checkbox
            label="2"
            name="type">糖尿病</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item
        label="5.是否赞成老人居家养老"
        prop="questionnaireHome">
        <el-radio-group
          v-model="ruleForm.questionnaireHome">
          <el-radio
            label="0">是</el-radio>
          <el-radio
            label="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        prop="questionnairetextarea"
        v-if="ruleForm.questionnaireHome == '0'">
        <el-input
          type="textarea"
          v-model="ruleForm.questionnairetextarea"
          placeholder="请输入原因"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')">提交</el-button>
        <el-button
          @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getHomeApi } from '../../api/backstage.js'
export default {
  data() {
    return {
      ruleForm: {
        // 性别
        questionnaireSex: '',
        // 疾病
        questionnaireIllness: [],
        // 年龄
        questionnaireAge: '',
        // 是否为独生子
        questionnaireChild: '',
        // 原因
        questionnairetextarea: '',
        // 是否赞成
        questionnaireHome: '',
      },
      // 验证
      rules: {
        questionnaireSex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        questionnaireAge: [{ required: true, message: '请选择年龄', trigger: 'change' }],
        questionnaireChild: [
          { required: true, message: '请选择是否为独生子女', trigger: 'change' },
        ],
        questionnaireIllness: [
          { type: 'array', required: true, message: '请至少选择一个', trigger: 'change' },
        ],
        questionnaireHome: [{ required: true, message: '请选择是否赞成', trigger: 'change' }],
        questionnairetextarea: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
      },
      windowWidth: document.documentElement.clientWidth, //实时屏幕宽度
      fontSize: 20,
    }
  },
  methods: {
    // 提交
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        console.log(this.ruleForm)
        if (valid) {
          this.ruleForm.questionnaireIllness = JSON.stringify(
            this.ruleForm.questionnaireIllness.map(Number)
          )
          this.ruleForm.questionnaireHome = this.ruleForm.questionnairetextarea
          delete this.ruleForm.questionnairetextarea
          getHomeApi(this.ruleForm).then((res) => {
            console.log(res)
            if (res) {
              this.$router.go(0)
            }
            // this.ruleForm.questionnaireIllness = []
          })
          this.resetForm()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
  },
  watch: {
    windowWidth(val) {
      document.querySelector('html').style.fontSize = val / 50 + 'px'
    },
  },
  mounted() {
    // <!--把window.onresize事件挂在到mounted函数上-->
    window.onresize = () => {
      return (() => {
        window.fullWidth = document.documentElement.clientWidth // 宽
        this.windowWidth = window.fullWidth
        //   动态设置html字体大小
        // document.querySelector('html').style.fontSize = this.windowWidth / 100 + 'px'
      })()
    }
  },
}
</script>
<style lang="scss">
.page {
  width: 100%;
  height: 100%;
  font-size: 1rem;

  .el-form-item {
    width: 100%;
  }
}

.page .el-form-item:hover {
  box-sizing: border-box;
  padding: 0.3125rem;
  box-shadow: 0.0625rem 0.0625rem 0.3125rem #ccc;
}

.page .el-form-item:last-child:hover {
  box-shadow: none;
  padding: 0;
}
</style>